<template>
	<view>
		<u-navbar back-text="返回" title="修改职位" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
			<view class="slot-wrap">
				<view class="topBox">
					<view class="top-fill">

					</view>
					<view class="clear-all" @click="submit">
						保存
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="160" :error-type=" ['toast']" :label-style="{fontSize:'28rpx',color:'rgba(153,153,153,1)'}">
				<u-form-item label="工种:" prop="name" label-position="top">
					<view class="kind-box">
						<view class="work-status" @click="showKindType=true">
							{{ form.kindList?form.kindList:'请选择' }}
							<image src="../../../static/images/common/right.png" mode=""></image>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="用工人数" prop="name" label-position="top">
					<view class="work-status">
						<u-input class="name" :custom-style="style" v-model="form.num" :clearable="false" input-align="left" />
						<image src="../../../static/images/common/right.png" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="到岗时间" prop="content" label-position="top">
					<view class="time-box">
						<view class="start-time" @click="showStartTime=true">
							<view class="start-text">
								{{ form.startTime }}
							</view>
							<view class="right-icon">
								<image src="../../../static/images/common/select-icon.png" mode=""></image>
							</view>
						</view>
						<view class="time-fill">
							——
						</view>
						<view class="start-time" @click="showEndTime=true">
							<view class="start-text">
								{{ form.endTime }}
							</view>
							<view class="right-icon">
								<image src="../../../static/images/common/select-icon.png" mode=""></image>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="用工时长" prop="name" label-position="top">
					<view class="work-status">
						<u-input class="name" :custom-style="style" v-model="form.num" :clearable="false" input-align="left" />
						<image src="../../../static/images/common/right.png" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="日工作时长(小时)" prop="name" label-position="top">
					<view class="work-status">
						<u-input class="name" :custom-style="style" v-model="form.num" :clearable="false" input-align="left" />
						<image src="../../../static/images/common/right.png" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="性别" prop="name">
					<view class="work-status">
						<u-radio-group v-model="form.type">
							<u-radio @change="radioChange" v-for="(item, index) in selectList" :key="index" :name="item.name" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item label="薪资(元/天)" prop="name" label-position="top">
					<view class="work-status">
						<u-input class="name" :custom-style="style" v-model="form.num" :clearable="false" input-align="left" />
						<image src="../../../static/images/common/right.png" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="地址" prop="name" label-position="top">
					<view class="work-status address-select">
						<u-input class="name" :custom-style="style" v-model="form.num" :clearable="false" input-align="left" />
						<image src="../../../static/images/home/location.png" mode=""></image>
					</view>
				</u-form-item>
				<u-form-item label="联系电话" prop="name" label-position="top">
					<view class="work-status address-select">
						<u-input class="name" :custom-style="style" v-model="form.num" :clearable="false" input-align="left" />
						<view class="phone-right">
							公开
							<view>
								<image src="../../../static/images/job/isshow.png" mode=""></image>
							</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="添加图片" prop="name" label-position="top" :border-bottom="false">
					<view class="addimg-box">
						<view class="add-box">
							<image src="../../../static/images/login/addcard.png" mode=""></image>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="职位描述" prop="content" label-position="top" :border-bottom="false">
					<textarea class="textarea" placeholder-class="pleace" placeholder="请输入职位描述(200以内)" maxlength="200"/>
				</u-form-item>
			</u-form>
		</view>
			<view class="foot-box">
				<view class="left-btn">
					下架职位
				</view>
				<view class="right-btn">
					确认发布
				</view>
			</view>
		<u-picker mode="time" v-model="showStartTime" :params="params" @confirm="selectStartTime"></u-picker>
		<u-picker mode="time" v-model="showEndTime" :params="params" @confirm="selectEndTime"></u-picker>
		<u-select v-model="showKindType" mode="mutil-column-auto" :list="kindList" @confirm="selectJobType"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import multipleMixin from '@/mixin/multiple-data-mixin';
	export default {
		mixins: [multipleMixin],
		data() {
			return {
				selectList: [{
					name: '日结',
					disabled: false
				}, {
					name: '月结',
					disabled: false
				}, {
					name: '自定义(请输入自定义结算方式)',
					disabled: false
				}],
				showStartTime: false,
				showEndTime: false,
				showWorkSelect: false,
				showKindType: false,
				style: {
					'fontSize': '32rpx',
					color: 'rgba(102,102,102,1)'
				},
				form: {
					num: '',
					type:'',
					name: '',
					sex: '男',
					kindList: '',
					phone: '',
					content: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur'],
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					]
				},
				list: [1, 2]
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {},
		methods: {
			goAdd() {
				this.$u.route({
					url: 'pages/home/resume/add',
				})
			},
			openShowKindType() {
				this.showKindType = true
			},
			radioChange(e) {
				this.form.sex = e
			},
			selectStartTime(e) {
				let startTime = e.year + '.' + e.month + '.' + e.day;
				this.form.startTime = startTime;
			},
			selectEndTime(e) {
				let endTime = e.year + '.' + e.month + '.' + e.day;
				this.form.endTime = endTime;
			},
			selectJobType(e) {
				this.form.kindList = e[2].label
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log(this.form.name)
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;

		.topBox {
			width: 100%;
			display: flex;

			.top-fill {
				flex: 1;
			}

			.clear-all {
				font-size: 28rpx;
				line-height: 44rpx;
				color: rgba(211, 176, 104, 1);
				opacity: 1;
			}
		}
	}

	.content {
		padding: 30rpx;

		.work-status {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 43rpx;
			color: rgba(102, 102, 102, 1);
			opacity: 1;

			.kind-item {
				position: relative;
				padding: 6rpx;
				margin-left: 20rpx;

				image {
					width: 26rpx;
					height: 26rpx;
					position: absolute;
					top: -14rpx;
					right: -10rpx;
				}
			}

			.kind-right {
				margin-top: 16rpx;
			}

			image {
				width: 14rpx;
				height: 24rpx;
				margin-top: 12rpx;
				margin-left: 24rpx;
			}
		}
		.address-select{
			.phone-right{
				margin-top: 10rpx;
				font-size:26rpx;
				font-weight:400;
				color:rgba(211,176,104,1);
				opacity:1;
				display: flex;
				line-height: 70rpx;
				view{
					image{
						width: 46rpx;
						height: 28rpx;
					}
				}
			}
			image{
				width: 36rpx;
				height: 46rpx;
			}
		}
		.kind-box {
			width: 100%;

			.kind-status {
				margin-top: 20rpx;
			}
		}

		.time-box {
			display: flex;
			width: 100%;

			.start-time {
				display: flex;
				width: 280rpx;
				justify-content: space-between;

				.start-text {
					font-size: 32rpx;
					font-weight: 400;
					line-height: 43rpx;
					color: rgba(102, 102, 102, 1);
					opacity: 1;
				}

				.right-icon {
					width: 24rpx;

					image {
						width: 24rpx;
						height: 14rpx;
						vertical-align: text-top;
					}
				}
			}

			.time-fill {
				line-height: 43rpx;
				margin: 0 40rpx;
			}
		}

		.textarea {
			width: 100%;
			height: 284rpx;
			background: rgba(246, 246, 246, 1);
			border-radius: 10rpx;
			padding: 28rpx 26rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-weight: 400;
			line-height: 37rpx;
			opacity: 1;
		}

		.pleace {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 37rpx;
			color: rgba(153, 153, 153, 1);
			opacity: 1;
		}
		.addimg-box{
			width: 100%;
			display: flex;
			.add-box{
				width: 200rpx;
				height: 200rpx;
				background-color: #fff;
				border: 1rpx dashed rgba(223,223,223,1);
				border-radius: 10rpx;
				padding: 68rpx;
				box-sizing: border-box;
				image{
					width: 64rpx;
					height: 64rpx;
				}
			}
			image{
				margin-right: 10rpx;
			}
		}
	}
	.foot-box{
		width:100%;
		height:110rpx;
		background:rgba(255,255,255,1);
		box-shadow:0px -5rpx 20rpx rgba(0,0,0,0.1);
		opacity:1;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		.left-btn{
			width:320rpx;
			height:90rpx;
			background:rgba(255,255,255,1);
			border:1rpx solid rgba(153,153,153,1);
			opacity:1;
			border-radius:8rpx;
			font-size:30rpx;
			font-weight:400;
			line-height:90rpx;
			color:rgba(153,153,153,1);
			text-align: center;
		}
		.right-btn{
			width:320rpx;
			height:90rpx;
			background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
			opacity:1;
			border-radius:8rpx;
			font-size:30rpx;
			font-weight:400;
			line-height:90rpx;
			color:rgba(255,255,255,1);
			text-align: center;
		}
	}
</style>
